<template>
  <div class="login_content">
    <form @submit.prevent="login">
      <div class="">
        <section class="login_message">
          <input
            type="tel"
            maxlength="11"
            placeholder="手机号"
            v-model="phone"
          >
          <button
            :disabled="!rightPhone"
            class="get_verification"
            :class="{right_phone:rightPhone}"
            @click.prevent="getCode()"
          >{{computeTime>0?`已发送(${computeTime}s)`:'获取验证码'}}</button>
        </section>
        <section class="login_verification">
          <input
            type="tel"
            maxlength="8"
            placeholder="验证码"
            v-model="code"
          >
        </section>
        <section class="login_hint">
          温馨提示：未注册腾讯视频帐号的手机号，登录时将自动注册，且代表已同意
          <a href="javascript:;">《用户服务协议》</a>
        </section>
      </div>
      <button class="login_submit">登录</button>
    </form>
  </div>
</template>
<script>
import { Toast } from 'mint-ui'
export default {
  data () {
    return {
      phone: '', // 手机号
      code: '', // 短信验证码
      computeTime: 0 // 计时的时间
    }
  },
  computed: {
    rightPhone () {
      return /^1\d{10}$/.test(this.phone)
    }
  },
  methods: {
    getCode () {
      this.phone = ''
      // 如果当前没有计时
      if (!this.computeTime) {
        // 启动倒计时
        this.computeTime = 30
        const intervalId = setInterval(() => {
          this.computeTime--
          if (this.computeTime <= 0) {
            // 停止计时
            clearInterval(intervalId)
          }
        }, 1000)
        // 发送ajax请求(向指定手机发送验证码短信)
      }
    },
    login () {
      // 前台表单验证 短信登录

      if (!this.rightPhone) {
        // 手机号不正确
        const instance = Toast({
          message: '手机号不正确',
          position: 'middle'
        })
        setTimeout(() => {
          instance.close()
        }, 2000)
      } else if (!/^\d{6}$/.test(this.code)) {
        // 验证码不正确
      }
    }
  }
}
</script>

<style scoped>
/* 短信验证 */
.login_message {
  position: relative;
  margin-top: 16px;
  height: 48px;
  font-size: 14px;
  background: #fff;
}
.login_content > form > div input {
  width: 100%;
  height: 100%;
  padding-left: 10px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 4px;
  outline: 0;
  font: 400 14px Arial;
}
.get_verification {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  border: 0;
  color: #ccc;
  font-size: 14px;
  background: transparent;
}
.right_phone {
  color: black;
}
.login_verification {
  position: relative;
  margin-top: 16px;
  height: 48px;
  font-size: 14px;
  background: #fff;
}
.login_content > form > div input {
  width: 100%;
  height: 100%;
  padding-left: 10px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 4px;
  outline: 0;
  font: 400 14px Arial;
}
.login_hint {
  margin-top: 12px;
  color: #999;
  font-size: 14px;
  line-height: 20px;
}
.login_content > form > div .login_hint > a {
  color: #02a774;
}
/* 登录 */
.login_submit {
  display: block;
  width: 100%;
  height: 42px;
  margin-top: 30px;
  border-radius: 4px;
  background: #4cd96f;
  color: #fff;
  text-align: center;
  font-size: 16px;
  line-height: 42px;
  border: 0;
}
</style>
